<template>
  <el-container style="height: 100%">
    <el-aside width="250px" style="background-color: #f8f9fa; box-shadow: 2px 0 5px rgba(0,0,0,0.1)">
      <div style="padding: 20px 0; text-align: center; font-size: 18px; font-weight: bold; color: #333;">文章列表</div>
      <el-menu
          mode="vertical"
          background-color="#f8f9fa"
          text-color="#666"
          active-text-color="#2c3e50"
          default-active="0"
          @select="selectItem"
          :collapse-transition="true"
      >
        <el-menu-item
            v-for="item in items"
            :index="item.index"
            :key="item.index"
            class="menu-item"
        >
          <div class="menu-item-text">{{ item.title }}</div>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <Markdown :content="content"></Markdown>
    </el-main>
  </el-container>
</template>
<script>
import FileManager from "../tools/FileManager.js";
// 引入 Markdown 组件
import Markdown from "./Markdown.vue";

export default {
  mounted() {
    // 组件挂载时，加载默认的首篇文章
    FileManager.getPostContent(this.topic, this.items[this.currentIndex].title).then((res) => {
      this.content = res.data;
    });
  },
  // topic为当前选中的专题名称
  props: ["items", "topic"],
  data() {
    return {
      // 在侧边栏上选中当前的文章
      currentIndex: 0,
      // 文章的Markdown内容
      content: "",
    };
  },
  components: {
    Markdown: Markdown,
  },
  methods: {
    selectItem(index) {
      this.currentIndex = index;
    },
  },
  watch: {
    // 监听选中的文章变化
    currentIndex: function (newVal) {
      FileManager.getPostContent(this.topic, this.items[newVal].title).then((res) => {
        this.content = res.data;
      });
    },
    // 监听选中的主题变化
    topic: function (newVal) {
      // 加载默认的首篇文章
      FileManager.getPostContent(newVal, this.items[this.currentIndex].title).then((res) => {
        this.content = res.data;
      });
    }
  }
};
</script>

<style scoped>
/* 侧边栏菜单项样式 */
.menu-item {
  transition: background-color 0.3s ease;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-item-text {
  font-size: 16px;
  padding: 12px 20px;
}

.el-menu-item.is-active {
  background-color: #e9ecef !important;
  border-right: 4px solid #2c3e50;
}
</style>
